<template>
    <!-- 侧边栏的实现 -->
    <div class="side-menu">
      <!-- 头像、用户名和信用等级实现 -->
      <div class="user-info">
        <img :src="userAvatar" class="avatar" />
        <div class="username" v-if="currentUser">{{ currentUser.username }}</div>
        <div class="rating">
          <!-- 根据 rate 动态生成星星 -->
          <span v-for="n in 5" :key="n" :class="['star', n <= rate ? 'yellow' : 'black']">★</span>
        </div>
      </div>
      
      <div class="menu-items">
        <div v-for="item in menuItems" :key="item.id" class="menu-item" @click="handleItemClick(item.route)" :class="{ active: currentRoute === item.route }">
          <img :src="item.icon" :class="['icon', `icon-${item.id}`]" alt="icon" />
          <div class="label-container">
            <span class="label">{{ item.label }}</span>
            <span class="en-label">{{ item.enLabel }}</span>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  // 单独导入每个图标
  import userAvatarIcon from '../assets/1.svg';
  import walletIcon from '../assets/icons/wallet.svg';
  import receiveIcon from '../assets/icons/receive.svg';
  import sendPackageIcon from '../assets/icons/send-package.svg';
  import basicDetailIcon from '../assets/icons/basic-detail.svg';
  import settingIcon from '../assets/icons/setting.svg';
  
  // 用户信息
  const currentUser = ref(JSON.parse(localStorage.getItem('user')) || null)
  const userAvatar = userAvatarIcon;
  const rate = ref(2);  
  const menuItems = ref([
    { 
      id: 1, 
      icon: walletIcon, 
      label: '我的钱包',
      enLabel: 'my wallet',
      route: 'Wallet'
    },
    { 
      id: 2, 
      icon: receiveIcon, 
      label: '委托历史',
      
      enLabel: 'published task\nhistory',
      route: 'Receive'
    },
    { 
      id: 3, 
      icon: sendPackageIcon, 
      label: '代取记录',
      enLabel: 'received task\nhistory',
      route: 'SendPackage'
    },
    { 
      id: 4, 
      icon: basicDetailIcon, 
      label: '个人信息',
      enLabel: 'personal\ninformation',
      route: 'edit'
    },
    { 
      id: 5, 
      icon: settingIcon, 
      label: '设置',
      enLabel: 'setting',
      route: 'Setting'
    }
  ]);
  
  const router = useRouter();
  const route = useRoute();
  const currentRoute = computed(() => route.name);
  
  function navigate(route) {
    router.push(route);
  }

  const handleItemClick = (route) => {
    const isAuthenticated = localStorage.getItem('user')
    if (!isAuthenticated) {
      router.push('/login')
      return
    }
    router.push(route)
  }
  </script>
  
  
  <style scoped>
.side-menu {
  border-radius: 0 40px 40px 0;  /* 右上和右下角的圆角 */
  position: fixed;
  top: 0;
  left: 0;
  width: 80%;
  max-width: 300px;  /* 最大宽度为300px */
  height: 100vh;  /* 满屏高度 */
  background: linear-gradient(to right, rgba(183, 205, 235, 0.8), rgba(209, 227, 241, 0.8));  /* 从左到右的渐变色，添加透明度 */
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  overflow: hidden;  /* 确保圆角不被超出内容遮挡 */
  backdrop-filter: blur(10px);
}
  
  .menu-items {
    padding: 16px; 
    max-height: calc(100vh - 32px); 
    overflow-y: auto;  /* 添加滚动条以适应内容 */
  }
  
  .user-info {
    padding-top: 32px; 
    padding-bottom: 51px;
    text-align: center;
  }
  
  .avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-bottom: 5px; 
    margin-top: 14px;
  }
  
  .username {
    font-size: 16px;
    margin-bottom: 15px;
    color: #000000;
    font-family: SourceHanFont;
  }
  
  .rating {

    background-color: #eaf1f9;
    /* 居中的margin */
    margin: 0 auto;
    width: 160px;
    height: 29px;
    display: flex;
    justify-content: center; 
    align-items: center;
    border-radius: 15px;
  }
  
  .star {
    
    font-size: 26px; 
    padding-bottom: 5px;

    margin: 4.5px; 
  }
  
  .yellow {
    color: #f1c644; /* 黄色 */
  }
  
  .black {
    color: #000000; 
  }
  
  .menu-item {
    display: flex;
    flex-direction: row; /* default: left to right */
    align-items: center;
    width: 243px;
    height: 65px;
         
    padding: 16px; 
    gap: 16px; 
    cursor: pointer;
    background-color: #ebf2fa;
    border-radius: 60px;
    margin:0 auto;
    margin-bottom: 25px; 
    transition: all 0.3s ease;
  }
  
  .menu-item:active {
  background-color: #d4e3f7;
}
  .menu-item:hover {
  transform: translateX(5px);
  background-color: #d4e3f7;
}

.menu-item.active {
  background-color: #c4d3ed;
  transform: scale(1.02);
}
  .label-container {
    display: flex;
    flex-direction: column;
  }
  
  .label {
    font-family: SourceHanFontBold;
    font-size: 16px;
    margin-bottom: -4px;
    color: #333333; 
    opacity: 0.8;
    margin-left: 16px; 
  }
  
  .en-label {
    font-family: "AnomyousPro";
    font-size: 11px;
    color: #333333;
    opacity: 0.4;
    margin-left: 16px; 
    padding-left: 2px;
    white-space: pre-line; /* 允许换行 */
    line-height: 0.8; /* 调整行高 */
    letter-spacing: 0.8px; /* 调整字间距 */
    margin-bottom: 5px;
  }
  
  .icon {
    width: 47px;
    height: 37px;
    object-fit: contain;
    margin-left: 16px; /* 将10px替换为16px */
  }

  .icon-1 {
    width: 31px;
    height: 28px;
    filter: invert(35%) sepia(1%) saturate(76%) hue-rotate(314deg) brightness(98%) contrast(92%);
    margin-left: 35px;
  }
  .icon-2 {
    width: 37px;
    height: 34px;
    filter: invert(35%) sepia(1%) saturate(76%) hue-rotate(314deg) brightness(98%) contrast(92%);
    margin-left: 30px;
  }
  .icon-3 {
    width: 41px;
    height: 37px;
    filter: invert(35%) sepia(1%) saturate(76%) hue-rotate(314deg) brightness(98%) contrast(92%);
    margin-left: 25px;
  }
  .icon-4 {
    width: 36px;
    height: 28px;
    filter: invert(35%) sepia(1%) saturate(76%) hue-rotate(314deg) brightness(98%) contrast(92%);
    margin-left: 30px;
  }
  .icon-5 {
    width: 40px;
    height: 39px;
    filter: invert(35%) sepia(1%) saturate(76%) hue-rotate(314deg) brightness(98%) contrast(92%);
    margin-left: 26px;
  }

  </style>